<template>
<div class="list">
  <div class="list-title clearfix">
    <h4 class="pull-left">
      <span>评论</span><small>共{{ total }}条评论</small>
    </h4>
    
  </div>
  <div class="list-content">
    <div class="comment">
      <div class="comment-textarea">
        <a href="#" class="head">
          <img class="img-circle" src="http://p1.music.126.net/mwtmYN5EJlmYjEej_oHoWw==/19195273997735719.jpg?param=60y60" />
        </a>
        <div class="textarea">
          <textarea placeholder="评论" v-model="content"></textarea>
          <div class="btns clearfix">
            <span class="pull-left big" href="#">#</span> 
            <span class="pull-left big" href="#">@</span>
            <a class="pull-right submit-btn" href="javascript:;" @click="commentStore">评论</a>
            <span class="pull-right">{{ commentNum }}</span>
          </div>
        </div>
      </div>

      <div class="comment-list">
        <h5>最新评论({{ total }})◆</h5>
        <div v-show="!showCommentList" class="loading-box"><img :src="'./static/img/loading.svg'" /></div>
        <div class="comment-box" v-if="total" v-show="showCommentList">
          <div class="comment-item" v-for="(item, index) in list">
            <a href="#" class="head">
              <img class="img-circle" src="http://p1.music.126.net/mwtmYN5EJlmYjEej_oHoWw==/19195273997735719.jpg?param=60y60" />
            </a>
            <div class="info">
              <div class="info-u">
                <a href="#">{{ item.user.data.name }}</a>: 
                <span>
                  {{ item.content }}
                </span>

                <div class="quote" v-if="item.reply.length">
                  <a href="#">{{ item.reply[0].user.name }} </a>: 
                  <span>
                    {{ item.reply[0].content }} 
                  </span>
                </div>

              </div>
              <div class="info-b clearfix">
                <span class="pull-left">{{ item.created_at.date | dateFormat }}</span>
                <a href="javascript:;" class="pull-right" @click="replyItem(item.id, item.user.data.name)">回复</a>
                <span class="pull-right sep">|</span>
                <a href="#" class="pull-right"><i class="glyphicon glyphicon-thumbs-up"></i>(2)</a>
              </div>
            </div>
          </div>
        </div>

        <div class="no-content" v-else>
          一条评论都没有哦~快来消灭零回复~
        </div>

        <div class="page" style="text-align: center;">
          <ul class="pagination pagination-sm" style="display:block;margin:0 auto;">
            <li><a href="#">&laquo;</a></li>
            
            <li><a href="#">1</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
        </div>

      </div>

    </div>
  </div>
</div>
</template>
<script>
import { fetchCommentList, fetchCommentStore } from '../service'
export default {
  props: ['fromType', 'fromId'],
  data () {
    return {
      showCommentList: false,
      list: [],
      total: 0,
      page: 1,
      content: '',
      commentTotalNum: 150,
      commentNum: 150,
      replyItemId: 0
    }
  },
  methods: {
    replyItem: function (id, name) {
      this.content = '@' + name + ' '
      this.replyItemId = id
    },
    commentList: function (page) {
      fetchCommentList(this.fromType, this.fromId, page).then((data) => {
        this.list = data.data
        this.total = data.meta.pagination.total
        this.showCommentList = true
      })
    },
    commentStore: function () {
      var data = {
        from_type: this.fromType,
        from_id: this.fromId,
        content: this.content,
        reply_id: this.replyItemId
      }
      fetchCommentStore(data).then((data) => {
        if (data === undefined) {
          alert('评论成功')
          this.content = ''
          this.commentList(this.page)
        } else {
          if (data.status_code === 401) {
            this.$router.push({name: 'Login'})
          } else {
            alert(data.message)
          }
        }
      })
    }
  },
  mounted () {
    this.commentList(this.page)
  },
  created () {
  },
  watch: {
    content (curVal, oldVal) {
      var curLength = curVal.length
      if (this.commentTotalNum < curLength) {
        this.content = oldVal
      } else {
        this.commentNum = this.commentTotalNum - curLength
      }
    }
  }
}
</script>
<style scoped>
  .no-content{
    text-align: center;
    padding: 40px 0 20px 0;
    font-size: 12px;
    color: #ccc;
  }
  .loading-box{
    width: 100%;
    min-height: 100px;
    margin-top: 10px;
    text-align: center;
  }
  .comment-box{
    animation:fadein 0.5s linear 1;
    -webkit-animation:fadein 0.5s linear 1;
    -moz-animation:fadein 0.5s linear 1;
    -o-animation:fadein 0.5s linear 1;
    -ms-animation:fadein 0.5s linear 1;
  }
</style>
